<template>
  <el-form style="margin-top: 30px;" label-position="left" label-width="90px" :model="projectForm" :rules="formRules"
           ref="formRef" v-loading="loading">
    <el-row justify="center">
      <el-col :lg="12" :xs="24" :md="24" :sm="15">
        <el-row>
          <el-col :span="24">
            <el-divider content-position="left">基本信息</el-divider>
          </el-col>
          <el-col :lg="11" :xs="24" :md="11" :sm="11">
            <el-form-item label="学校名称:" prop="school_id">
              {{ projectForm.school_name }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :lg="24" :xs="24" :md="24" :sm="24">
            <el-form-item label="项目主管:" prop="manager">
              <el-checkbox-group v-model="projectForm.manager">
                <el-checkbox style="background-color: #fff;" v-for="(item, index) in manageOptions" border
                             :label="item.id" :key="index">
                  {{ item.realname }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :lg="24" :xs="24" :md="24" :sm="24">
            <el-form-item label="项目成员:" prop="school_id">
              <el-checkbox-group v-model="projectForm.projectMember">
                <el-checkbox style="background-color: #fff;" v-for="(item, index) in memberOptions" border
                             :label="item.id" :key="index">
                  {{ item.realname }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :lg="24" :xs="24" :md="24" :sm="24">
            <el-form-item label="微信通知:" prop="notification">
              <el-checkbox-group v-model="projectForm.notification">
                <el-checkbox style="background-color: #fff;" v-for="(item, index) in noticeOptions" border
                             :label="item.id" :key="index">
                  {{ item.realname }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :lg="11" :xs="24" :md="11" :sm="11">
            <el-form-item label="项目名称:" prop="name">
              <el-input v-model="projectForm.name" ref="name" placeholder="请输入项目名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :lg="11" :xs="19" :md="11" :sm="11">
            <el-form-item label="专业录入:" prop="school_id" style="display: flex">
              <el-input v-model="projectForm.major[0].name"/>
            </el-form-item>
          </el-col>
          <el-col :lg="11" :xs="5" :md="11" :sm="11">
            <el-form-item prop="school_id" label-width="10px">
              <el-button @click="handlePush">添加专业</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-for="(item,index) in projectForm.major" v-show="index">
          <el-col :lg="11" :xs="19" :md="11" :sm="11">
            <el-form-item prop="school_id" style="display: flex">
              <el-input v-model="item.name"/>

            </el-form-item>
          </el-col>
          <el-col :lg="5" :xs="5" :md="11" :sm="11">
            <el-form-item prop="school_id" label-width="10px">
              <div style="height: 30px;line-height: 30px">
                <Delete @click="handlePush('pop',index)" style="width: 1em; height: 1em; "/>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="justify-content: space-between;">
          <el-col :span="24">
            <el-divider content-position="left">学校联系信息</el-divider>
          </el-col>
          <el-col :lg="11" :xs="24" :md="11" :sm="11">
            <el-form-item label="咨询电话1:" prop="phone">
              <el-input v-model="projectForm.phone" placeholder="请输入咨询电话1"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="11" :md="11" :xs="24" :sm="11">
            <el-form-item label="邮寄地址:" prop="address">
              <el-input v-model="projectForm.address" placeholder="请输入邮寄地址"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="11" :xs="24" :md="11" :sm="11">
            <el-form-item label="收寄人:" prop="shoujianren">
              <el-input v-model="projectForm.shoujianren" placeholder="请输入收寄人"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="11" :xs="24" :md="11" :sm="11">
            <el-form-item label="邮编:" prop="youbian">
              <el-input v-model="projectForm.youbian" placeholder="请输入邮编"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="11" :md="11" :xs="24" :sm="11">
            <el-form-item label="微  信  号:" prop="weixin">
              <el-input v-model="projectForm.weixin" placeholder="请输入微  信  号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="24" :md="24" :xs="24" :sm="24">
            <el-form-item label="微信二维码:" prop="weixin_code">
              <upload-default ref="weixin_code"></upload-default>
            </el-form-item>
          </el-col>
          <el-col :lg="11" :xs="24" :md="11" :sm="11">
            <el-form-item label="咨询电话2:" prop="phone2">
              <el-input v-model="projectForm.phone2" placeholder="请输入咨询电话2"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="11" :md="11" :xs="24" :sm="11">
            <el-form-item label="网址:" prop="site">
              <el-input v-model="projectForm.site" placeholder="请输入网址"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-divider content-position="left">学校报考要求</el-divider>
          </el-col>
          <el-col :lg="24" :md="24" :xs="24" :sm="24">
            <el-form-item label="材料要求:" prop="cailiao">
              <el-input v-model="projectForm.cailiao" type="textarea" :rows="4"
                        placeholder="请输入材料要求"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="11" :xs="24" :md="11" :sm="11">
            <el-form-item label="报名费标准:" prop="fee_type">
              <el-radio-group v-model="projectForm.fee_type">
                <el-radio label="0">不收报名费</el-radio>
                <el-radio label="1">收取报名费</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :lg="11" :md="11" :xs="24" :sm="11">
            <el-form-item label="报考金额:" prop="fee">
              <el-input v-model="projectForm.fee" placeholder="请输入报考金额"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="11" :xs="24" :md="11" :sm="11">
            <el-form-item label="在线缴费:">
              <el-radio-group v-model="projectForm.online_pay_type" style="width: 100%">
                <el-radio label="0">未开通</el-radio>
                <el-radio label="1">开通</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :lg="11" :md="11" :xs="24" :sm="11">
            <el-form-item label="床位定金:">
              <el-input v-model="projectForm.fee2" placeholder="请输入床位定金"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="24" :md="24" :xs="24" :sm="24">
            <el-form-item label="缴费二维码:" prop="pay_code">
              <upload-default ref="pay_code"></upload-default>
            </el-form-item>
          </el-col>
          <el-col :lg="22" :xs="24" :md="24" :sm="24">
            <el-form-item prop="teacher">
              <el-button type="primary" :loading="saveLoading" @click="handleSubmit">确认提交</el-button>
              <el-button @click="handleBack">返回</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </el-form>
</template>

<script lang='ts' setup>
import {reactive, ref, onMounted} from 'vue'
import {useRouter, useRoute} from 'vue-router';
import {projectInfo, manageList, memberList, projectInsert, projectUpdate} from "@/api/school";
import UploadDefault from '@/components/uploadFile/UploadDefault.vue'
import {ElMessage} from "element-plus";

const router = useRouter()
const route = useRoute()
let projectForm = reactive({
  school_name: '',
  school_id: '',    //学校id
  edu: '',          //申报学历
  name: '',         //项目名
  phone: '',        //咨询电话
  phone2: '',       //咨询电话2
  weixin: '',       //微信号
  weixin_code: '', //微信二维码地址
  address: '',      //邮寄地址
  cailiao: '',      //材料要求
  fee_type: '0',     //报名费标准：0-不收报名费，1-收报名费
  fee: '',           //报考金额
  online_pay_type: '0', //在线缴费：0-未开通，1-开通
  online_pay_code: '', //缴费二维码
  manager: [], //manager
  shoujianren: '',
  youbian: '', //邮编
  major: [{name: ''}], //专业录入（数组)
  site: '',
  fee2: '',
  projectMember: [], //项目成员
  notification: [] //微信通知
})
const loading = ref(false)
const formRef = ref('');
const formRules = reactive({
  name: [{required: true, message: '请输入项目名称', trigger: 'blur'}]
})
let saveLoading = ref(false)
let manageOptions = ref([])
let memberOptions = ref([])
let noticeOptions = ref([])
let weixin_code = ref('')
let pay_code = ref('')
//获取项目成员,项目主管,微信通知多选数据
const fetchOptions = async (type) => {
  let param = {project_id: route.query.id, type: type}
  if (!type) {               //项目主管下拉数据
    let result = await manageList(param)
    await fetchOptions(1)
    if (result) {
      manageOptions.value = result.data
      console.log('manageOptions', manageOptions);
    }
  } else if (type === 1) {   //项目成功下拉数据
    let result = await memberList(param)
    await fetchOptions(2)
    if (result) {
      memberOptions.value = result.data
    }
  } else if (type === 2) {   //微信通知下拉数据
    let result = await memberList(param)
    if (result) {
      noticeOptions.value = result.data
    }
  }
}
const handleBack = () => {
  router.push({path: '/school-management/index'})
}

const handleSubmit = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      let res = ''

      projectForm.weixin_code =  weixin_code.value.fileList.length ? weixin_code.value.fileList[0].url:''
      projectForm.online_pay_code =  pay_code.value.fileList.length ?pay_code.value.fileList[0].url:''

      saveLoading.value = true;
      if (route.query.id) {
        res = await projectUpdate(projectForm)
      } else {
        res = await projectInsert(projectForm)
      }
      saveLoading.value = false;
      if (res) {
        ElMessage({message: '保存成功', type: 'success'})
        handleBack()
      }
    }
  })

}

const handlePush = (type, index) => {
  if (type === 'pop') {
    projectForm.major.splice(index, 1)
  } else {
    projectForm.major.push({name: ''})
  }
}

const fetchInfo = async () => {
  loading.value = true
  let res = await projectInfo({id: route.query.id})
  loading.value = false
  if (res) {
    if (res.data.weixin_code) {
      weixin_code.value.fileList = [{url: res.data.weixin_code}]
    }

    if (res.data.online_pay_code) {
      pay_code.value.fileList = [{url: res.data.online_pay_code}]
    }

    projectForm = Object.assign(projectForm, res.data)
  }
}

onMounted(() => {
  if (route.query.school_id) {
    projectForm.school_id = route.query.school_id
    projectForm.school_name = route.query.school_name
  } else if (route.query.id) {
    fetchInfo()
  }
  fetchOptions()
})

</script>
<style scoped>
.el-select {
  width: 100%;
}

.el-checkbox {
  margin-bottom: 5px;
  width: 90px;
}
</style>    